{% extends "base.html" %}
{% block header %}
<script type="text/javascript" src="/static/Highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="/static/Highcharts/js/themes/test.js"></script>
<script type="text/javascript">
Highcharts.setOptions({
   global: {
      useUTC: false
   }
});
var lineoptions={
   	  credits:{enabled:false},//不显示Highcharts的链接
      chart: {
         renderTo: 'cpu',
         defaultSeriesType: 'line',
		 animation:true,//不显示动画(性能)
         events: {
            load: function() {
               var series = this.series[0];
               setInterval(function() {
			   	var d = new Date();
				d.setMilliseconds(0);
				    $.getJSON('/host/getinfo', {'host': $('#ip').html(), 'flag':2}, function(json){
                    var x = d.getTime(), // current time with 0 milliseconds
                    y = json.cpu_usage * 100;
                    $('#cpu_usage').html(json.cpu_usage);
                    $('#mem_usage').html(json.mem_usage);
                    series.addPoint([x, y], true, true);
                    });	 

               }, 3000);
            }
         }
      },
      title: {
         text: 'CPU使用记录(%)'
      },
      xAxis: {
         type: 'datetime',//x轴数据类型 时间
		 tickInterval: 1000 // 5 seconds tick，x轴竖线间距
      },
      yAxis: {
		 min:0,
		 max:100,//y轴最大值
		 tickInterval:10
      },
      
      series: [{
         data: (function() {//初始数据填充
			var d = new Date();
				d.setMilliseconds(0);
            var data = [],
               time = d.getTime(),
               i;
            
            for (i = -19; i <= 0; i++) {
               data.push({
                  x: time + i * 1000,
                  y: 0
               });
            }
            return data;
         })()
      }]
   };
   
$(document).ready(function() {
   var cpu  = new Highcharts.Chart(lineoptions);
   lineoptions.chart.renderTo="memory";
   lineoptions.title.text="内存使用记录(G)";
   
   lineoptions.chart.events.load=function(){
       var series = this.series[0];
       setInterval(function() {
	   	var d = new Date();
		d.setMilliseconds(0);
          var x = d.getTime(), // current time with 0 milliseconds
             y = $('#mem_usage').html() * 100//Math.abs(Math.random()*8);
			 
          series.addPoint([x, y], true, true);
       }, 3000);
   }
   lineoptions.series.data = (function() {
			var d = new Date();
				d.setMilliseconds(0);
            var data = [],
               time = d.getTime(),
               i;
            
            for (i = -52; i <= 0; i++) {
               data.push({
                  x: time + i * 1000,
                  y: 0
               });
            }
            return data;
         })();
   lineoptions.yAxis.max=100;
   lineoptions.yAxis.tickInterval=10;
   lineoptions.xAxis.tickInterval=1000;
   lineoptions.plotOptions={line:{lineWidth:2,color:"#0080ff",marker:{radius:4}}};
   
   var memory  = new Highcharts.Chart(lineoptions);
});
</script>
<style type="text/css">
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {display: inline-block;}  /* for IE/Mac */
	.cpu{width:830px;height:200px; display:block;float:left;margin-right:10px;}
	.memory{height:200px; width:830px; margin-top:10px;}
</style>
{% endblock %}

{% block menu %}
<div id='dyn_info' style='display:none'>
    <div id='cpu_usage'>0</div>
    <div id='mem_usage'></div>
    <div id='ip'>{{host.ip}}</div>
</div>
<ul class="box">
	<li><a href="/index"><span>首页</span></a></li>
	<li><a href="/monitor"><span>服务监控</span></a></li>
	<li><a href="/report"><span>服务报表</span></a></li>
	<li><a href="/alert"><span>报警管理</span></a></li>
	<li><a href="/flow"><span>流程管理</span></a></li>
	<li><a href="/doc"><span>运维文档</span></a></li>
	<li id="menu-active"><a href="/host"><span>服务主机</span></a></li>
	<li><a href="/accident"><span>事故中心</span></a></li>
</ul>
{% endblock %}


{% block content %}
<div id="mon-tit">
    <div class="left">暴风主机管理 >> 所有主机</div>
    <div class="right"><a>添加主机</a></div>
</div>
<div class="clr"></div>
<hr>
	<h3 class='tit'>主机详情</h3></br>
	<div id="mon-di" class="right-col">
		<div class="ji" >
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;主机名：<u>{{ host.name }}</u></span>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;IP：<u>{{ host.ip }}</u></span>
		</br></br>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;CPU：<u>{{info.cpu_model_name}}</u></span>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;内存：<u>{{info.mem_total}}(MB)</u></span>
		</br></br>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;硬盘：<u>{{info.disk}}(G)</u></span>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;操作系统：<u>{{info.os_version}} </u></span>
		</br></br>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;所属机房：<u>{{ host.idc }}</u></span>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;产品线：<u>{{ pname }}</u></span>
		</br></br>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;句柄数：<u>100</u></span>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;进程数：<u>100</u></span>
		</br></br>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;最后登陆用户：<u>panxiaodong</u></span>
		<span style="width:50%">&nbsp;&nbsp;&nbsp;&nbsp;最后登录时间：<u>2011-06-23 20:15:02</u></span>
		</div>
	</div>
	</br>
	<hr>
	</br>
	<div class="clearfix">
		<div id="cpu" class="cpu"></div>
	</div>
	<div class="memory" id="memory"></div>
	<hr>
{% endblock %}
